@charset "UTF-8";
*{
  text-decoration: none;
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑"; }

#container {
  height: 100%;
  width: 100%; }

.anchorBL > a {
  display: none !important; }

#nav {
  width: 100%;
  background: #FFF;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; }
  #nav a {
    flex: 1;
    height: 1.0133333333rem;
    line-height: 1.0133333333rem;
    text-align: center;
    font-size: 13px;
    text-decoration: none;
    color: #666; }
    [data-dpr="2"] #nav .nav_bar {
      font-size: 26px; }
    [data-dpr="3"] #nav .nav_bar {
      font-size: 39px; }
  #nav .nav_left {
    border-bottom: 4px solid #14a4fb;
    color:#14a4fb;
  }

/* .main_top{
	width:px2em(536px);
	height:px2em(590px);
	background:red;
	position:fixed;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	} */
.fucen {
  width: 7.1466666667rem;
  height: 7.8666666667rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  display: none; }
  .fucen .touxiang {
    width: 2.08rem;
    height: 2.08rem;
    margin: 1.0666666667rem auto 0.8rem; }
    .fucen .touxiang img {
      width: 100%;
      height: 100%; }
  .fucen p {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #333;
    font-weight: 900;
    margin-bottom: 0.5333333333rem; }
    [data-dpr="2"] .fucen p {
      font-size: 36px; }
    [data-dpr="3"] .fucen p {
      font-size: 54px; }
  .fucen h1 {
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #333;
    margin-bottom: 0.8rem; }
    [data-dpr="2"] .fucen h1 {
      font-size: 30px; }
    [data-dpr="3"] .fucen h1 {
      font-size: 45px; }
    .fucen h1 i {
      color: #14a4fb;
      margin: 0 0.0666666667rem; }
  .fucen .qxdd {
    width: 4.5866666667rem;
    height: 1.0666666667rem;
    color: #fff;
    background: #14a4fb;
    font-size: 14px;
    text-align: center;
    line-height: 1.0666666667rem;
    box-shadow: 0px 8px 20px 0px rgba(20, 164, 251, 0.44);
    margin: 0 auto;
    border-radius: 50px; }
    [data-dpr="2"] .fucen .qxdd {
      font-size: 28px; }
    [data-dpr="3"] .fucen .qxdd {
      font-size: 42px; }

.flooter {
  width: 100%;
  height: 1.3066666667rem;
  border-top: 1px solid #e3e3e3;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #e3e3e3; }

.flooter ul {
  width: 100%;
  height: 1.3066666667rem;
  background: #fff;
  display: flex; }

.flooter ul li a {
  text-decoration: none; }

.flooter ul li {
  /*display: block;*/
  margin: auto 0;
  flex: 1;
  vertical-align: middle; }

.flooter ul li a img {
  display: block;
  margin: 0 auto;
  width: 0.5866666667rem;
  height: 0.5866666667rem; }

.flooter ul li p {
  font-size: 0.24rem;
  color: #666;
  text-align: center;
  margin-top: 0.0666666667rem; }

.flooter ul li .color {
  color: #14a4fb; }

/*
	1.怎么设置每隔一段时间请求一次服务器
	2. 怎么在跳转后让地图显示在正中心
	3.怎么显示用户的头像
	4.路线图怎么同时出现
 */
/* .kdxx{
  width:100px;
  border:1px solid red;
   
} */
/*<span class="BMap_Marker" unselectable="on" style="position: absolute;padding: 0px;margin: 0px;border: 0px;width: 0px;height: 0px;left: -8px;top: 300px;z-index: 19000000;"><div style="position: absolute; margin: 0px; padding: 0px; width: 50px; height: 55px; overflow: hidden;"><img src="img/图层-1.png" style="display: block; border:none;margin-left:-5px; margin-top:-55px; "></div></span>*/
.BMap_Marker{
  /*overflow: visible !important;*/
   div{
    overflow: visible !important;
   }
}
/*<span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;); width: 50px; height: 55px; left: 203px; top: 109px; z-index: 19000000; user-select: none;" title=""></span>*/



function jdkdy(){
    
    function initLine(){
      bounds = new Array();
      linesPoints = new Array();
      map.clearOverlays(); 
      for(var i=0;i<KDZB.length;i++){
        var spoi1 = new BMap.Point(KDZB[i].lat,KDZB[i].lng);
        console.log(spoi1);
        var driving1 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine});
        driving1.search(spoi1, epoi); 
        var opts = {
          position : spoi1,    // 指定文本标注所在的地理位置
          offset   : new BMap.Size(30, -30)    //设置文本偏移量
        }
        var label = new BMap.Label("顺丰快递", opts);  // 创建文本标注对象
        label.setStyle({
           color : "#333",
           fontSize : "12px",
           border:"none",
           padding:" 0 10px",
           lineHeight : "26px",
           fontFamily:"微软雅黑"
         });
        map.addOverlay(label);  
      }                             
    }
    function run(){
      for(var m = 0;m < linesPoints.length; m++){
        var pts = linesPoints[m];
        // console.log(pts);
        var len = pts.length;
        // console.log(len);
        var carMk = new BMap.Marker(pts[0],{icon:myIcon});
        console.log(carMk);
        map.addOverlay(carMk);
        resetMkPoint(1,len,pts,carMk)
      }
      
      function resetMkPoint(i,len,pts,carMk){
        carMk.setPosition(pts[i]);
        if(i < len){
          setTimeout(function(){
            i++;
            resetMkPoint(i,len,pts,carMk);
          },100);
        }
      }
      
    }
    function drawLine(results){
      var opacity = 0.45;
      var planObj = results.getPlan(0);
      var b = new Array();
      var addMarkerFun = function(point,imgType,index,title){
        
        var url;
        var width;
        var height
        var myIcon;
        // imgType:1的场合，为起点和终点的图；2的场合为车的图形
        // var imgType=2;
        // alert(imgType);
        if(imgType == 1){

          url = "img/图层-1.png";
          width = 50;
          height = 55;
          myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(-5, 0 - index * height)});
        }else{
          console.log(imgType);
          /*url = "http://lbsyun.baidu.com/jsdemo/img/trans_icoms.png";
          width = 50;
          height = 55;
          var d = 55;
          var cha = 0;
          var jia = 0;
          if(index == 2){
            d = 21;
            cha = 5;
            jia = 1;
          }*/
          /*myIcon = new BMap.Icon(url,new BMap.Size(width, d),{offset: new BMap.Size(14, (52 + jia)),imageOffset: new BMap.Size(20, 50 * height)});*/
        }
        
        var marker = new BMap.Marker(point, {icon: myIcon});
        if(title != null && title != ""){
          marker.setTitle(title);
        }
        // 起点和终点放在最上面
        if(imgType == 1){
          marker.setTop(true);
        }
        map.addOverlay(marker);
      }
      var addPoints = function(points){
        for(var i = 0; i < points.length; i++){
          bounds.push(points[i]);
          b.push(points[i]);
        }
      } 
      // 绘制驾车步行线路
      for (var i = 0; i < planObj.getNumRoutes(); i ++){
        var route = planObj.getRoute(i);
        if (route.getDistance(false) <= 0){continue;}
        addPoints(route.getPath());
        // 驾车线路
        if(route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING){
          map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:opacity,strokeWeight:6,enableMassClear:true}));
        }else{
        // 步行线路有可能为0
          map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#30a208",strokeOpacity:0.75,strokeWeight:4,enableMassClear:true}));
        }
      } 
      map.setViewport(bounds);  
      // 终点
      addMarkerFun(results.getEnd().point,1,1);
      // 开始点
      addMarkerFun(results.getStart().point,1,0);
      linesPoints[linesPoints.length] = b;
    }
    initLine();
    setTimeout(function(){
      run();
    },1000);
  }